<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="菜单名:" prop="menuName">
        <el-input v-model="form.menuName" clearable placeholder="菜单名" />
      </el-form-item>
      <el-form-item label="菜单状态:" prop="state">
        <el-select v-model="form.state" placeholder="请选择">
          <el-option
            v-for="item in seletcArry"
            :key="item.value"
            :label="item.txt"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="checkList">查询</el-button>
        <el-button type="primary" @click="handleAdd(null)">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @command="handleAction"
    >
      <template #menuIcon="{ row }">
        <hcSvg :name="row.menuIcon || 'fenlei'" />
      </template>
      <template #menuType="{ row }">
        <el-tag v-if="row.menuType === 0" type="success">目录</el-tag>
        <el-tag v-if="row.menuType === 1">菜单</el-tag>
        <el-tag v-if="row.menuType === 2" type="warning">按钮</el-tag>
      </template>
      <template #state="{ row }">
        <el-tag :type="row.state ? 'success' : 'warning'">
          {{ row.state ? "正常" : "停用" }}
        </el-tag>
      </template>
      <template #isShow="{ row }">
        <el-tag :type="row.isShow ? 'success' : 'warning'">
          {{ row.isShow ? "显示" : "隐藏" }}
        </el-tag>
      </template>
      <template #isLink="{ row }">
        <el-tag :type="row.isLink ? 'success' : 'warning'">
          {{ row.isLink ? "是" : "否" }}
        </el-tag>
      </template>
      <template #creationTime="{ row }">
        {{ formatTime(row.creationTime) }}
      </template>
    </hcTable>
    <!-- 新增 / 编辑 菜单 -->
    <menu-dialog
      :isEdit="isEdit"
      :visible="visible"
      :curMenu="curItem"
      :treeMenu="list"
      @onSure="onSure"
      @onCancel="(visible = false), (curItem = null), (isEdit = false)"
    />
  </div>
</template>

<script setup name="Menu">
import { reactive, ref, toRefs, computed } from "vue";
import useTable from "@/hooks/useTable";
import { formatTime } from "@/utils";
import MenuDialog from "./components/menu-dialog.vue";

const { list, loading, getList, addFun, updateFun, deleteFun } = useTable(
  "/app/Menu",
  false
); // false 不要分页

const formRef = ref();

const tableColumn = [
  { type: "index", width: "60", label: "No.", align: "center", fixed: true },
  {
    prop: "menuName",
    width: "160",
    label: "菜单名",
    align: "center",
    showOverflowTooltip: true,
    fixed: true,
  },
  {
    prop: "menuIcon",
    width: "100",
    label: "菜单图标",
    align: "center",
    slot: "menuIcon",
  },
  { prop: "orderNum", width: "60", label: "排序", align: "center" },
  {
    prop: "permissionCode",
    label: "权限标识",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    prop: "router",
    label: "路由地址",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    prop: "redirect",
    label: "重定向",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    prop: "component",
    label: "组件路径",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    prop: "menuType",
    width: "90",
    label: "菜单类型",
    align: "center",
    slot: "menuType",
  },
  {
    prop: "isShow",
    width: "90",
    label: "显示状态",
    align: "center",
    slot: "isShow",
  },
  {
    prop: "isLink",
    width: "90",
    label: "是否外链",
    align: "center",
    slot: "isLink",
  },
  {
    prop: "state",
    width: "90",
    label: "菜单状态",
    align: "center",
    slot: "state",
  },
  {
    prop: "creationTime",
    label: "创建时间",
    align: "center",
    slot: "creationTime",
    showOverflowTooltip: true,
  },
  { prop: "remark", label: "备注", align: "center", showOverflowTooltip: true },
  {
    width: "180",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "新增",
        type: "primary",
        command: "add",
        permission: [],
      },
      {
        name: "编辑",
        type: "warning",
        command: "edit",
        permission: [],
      },
      {
        name: "删除",
        type: "danger",
        command: "delete",
        permission: [],
      },
    ],
  },
];

const data = reactive({
  // 绑定数据
  form: {
    menuName: "",
    state: "",
  },
  seletcArry: [
    { txt: "全部", value: "" },
    { txt: "正常", value: true },
    { txt: "停用", value: false },
  ],
  visible: false,
  isEdit: false, // 默认新增
  curItem: null,
});

const options = computed(() => {
  return {
    loading: loading.value,
    // showPagination: true,
    rowKey: "id",
    defaultExpandAll: false,
    border: true,
  };
});

const params = computed(() => {
  let form = JSON.parse(JSON.stringify(data.form));
  Object.keys(form).forEach((key) => {
    if (form[key] === null) {
      form[key] = "";
    }
  });
  return {
    ...form,
  };
});

const handleAction = (command, row) => {
  switch (command) {
    case "add":
      handleAdd(row);
      break;
    case "edit":
      data.curItem = row;
      data.isEdit = true;
      data.visible = true;
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};

// 点击查询
const checkList = () => {
  getList(params.value);
};
const handleAdd = (row) => {
  data.curItem = row;
  data.isEdit = false;
  data.visible = true;
};

const onSure = (opt) => {
  if (data.isEdit) {
    // 编辑菜单
    updateFun(opt.curMenuId, opt.params).then(() => {
      data.isEdit = false;
    });
  } else {
    // 新增菜单
    addFun(opt.params);
  }
};

// 删除
const handlerDel = (item) => {
  deleteFun([item]);
};

const { form, visible, curItem, isEdit, seletcArry } = toRefs(data);
</script>

<style lang="scss" scoped></style>
